<template>
  <div>
    <div class="layout_card">
      <el-card>
        <div class="attr_list" v-show="CARD_SCENE == 'DEFAULT_LIST'">
          <div class="table_section">
            <el-table :data="tableData" stripe border>
              <el-table-column
                label="序号"
                width="100"
                type="index"
                align="center"
              />
              <el-table-column prop="skuName" label="名称" />
              <el-table-column
                prop="skuDesc"
                label="描述"
                show-overflow-tooltip
              />

              <el-table-column prop="skuDefaultImg" label="图片">
                <template #default="scope">
                  <myImg :scr="scope.row.skuDefaultImg"></myImg>
                </template>
              </el-table-column>

              <el-table-column prop="weight" label="重量" />

              <el-table-column prop="price" label="价格" />

              <el-table-column label="操作" fixed="right" width="300">
                <template #default="{ row }">
                  <el-button
                    :type="row.isStacking ? 'success' : ''"
                    :icon="row.isStacking ? 'Bottom' : 'Top'"
                    size="small"
                    title="上架SKU"
                    @click="STACK_SKU(row, row.id)"
                  ></el-button>
                  <!-- type="success" -->
                  <!-- <el-button
                    type="primary"
                    icon="Edit"
                    size="small"
                    title="修改SKU"
                    @click="SWITCH_CARD('EDIT_SKU', row.id)"
                  ></el-button> -->
                  <el-button
                    type="info"
                    icon="View"
                    size="small"
                    title="查看SKU列表"
                    @click="OPEN_DIALOG(row.id)"
                  ></el-button>

                  <el-button
                    type="danger"
                    icon="Delete"
                    size="small"
                    title="删除SKU"
                    @click="DELETE_ATTR(row.id)"
                  ></el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <div class="pagination_section" style="margin: 10px 0 0">
            <el-pagination
              v-model:current-page="form.pageNo"
              v-model:page-size="form.limit"
              :page-sizes="[10, 20, 50, 100]"
              background
              layout="prev, pager, next,jumper, ->,sizes,total "
              :total="total"
              @size-change="GET_LIST"
              @current-change="GET_LIST"
            />
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'skuLayout',
}
</script>
<script setup lang="ts">
import { ElMessage } from 'element-plus'

import { onMounted, onBeforeUnmount, ref, reactive } from 'vue'
import { publicConfirm } from '@/utils/handleData'

import { reqDeletSPU, resIdBySkuList } from '@/api/product'
import type { Spu, SpuListResponseData } from '@/api/product/type'
import useAttributeCate from '@/store/modules/attributeCateStore'
let AttributeCateStore = useAttributeCate()

onMounted(() => {
  GET_LIST()
})

onBeforeUnmount(() => {})

let total = ref<number>(1)
let form = reactive({
  pageNo: 1,
  limit: 10,
})
let tableData = ref<any>([])

let sku_tableData = ref<any>([])

const attrParams_init = {
  id: 0,
  spuName: '',
  description: '',
  category3Id: AttributeCateStore.key_third,
  tmId: '',
  spuSaleAttrList: [],
  spuImageList: [],
}
let attrParams = reactive<Spu>({
  ...attrParams_init,
})

console.log(attrParams)
const dialogVisible = ref(false)

const GET_LIST = async () => {
  let result: SpuListResponseData = await resIdBySkuList(10)
  if (result.code == 200) {
    tableData.value = result.data
    total.value = 100
  }
}

let CARD_SCENE = ref<string>('DEFAULT_LIST')
// const SWITCH_CARD = (scene, id = 0) => {
//   SWITCH_INIT_CARD({ scene, id })
//   CARD_SCENE.value = scene
// }

// const SWITCH_INIT_CARD = ({ scene, id }) => {
//   Object.assign(attrParams, {
//     ...attrParams_init,
//     spuSaleAttrList: [],
//     spuImageList: [],
//   })
//   if (scene == 'DEFAULT_LIST') {
//     // 切回列表
//   } else if (scene == 'ADD_SKU') {
//     // 添加SKU
//   } else if (scene == 'EDIT_SKU') {
//     // 修改属性
//     const found = tableData.value.find((item) => item.id === id)
//     if (found) {
//       Object.assign(attrParams, found)
//     }
//   }
// }

// 删除SKU
const DELETE_ATTR = async (id = 0) => {
  const flag = await publicConfirm({
    title: '提示',
    content: '确认删除该SKU？',
  })
  let type = '删除'
  if (flag) {
    let result: any = await reqDeletSPU(id)
    if (result.code == 200) {
      ElMessage({
        type: 'success',
        message: `${type}成功`,
      })
      GET_LIST()
    } else {
      ElMessage({
        type: 'error',
        message: `${type}失败`,
      })
    }
  } else {
    ElMessage({
      type: 'info',
      message: `取消${type}`,
    })
  }
}
const STACK_SKU = async (row, id = 0) => {
  let type = row.isStacking ? '下架' : '上架'
  const flag = await publicConfirm({
    title: '提示',
    content: `确认${type}该商品？`,
  })

  if (flag) {
    let result: any = await reqDeletSPU(id)
    if (result.code == 200) {
      ElMessage({
        type: 'success',
        message: `${type}成功`,
      })
      row.isStacking = !row.isStacking
      //   GET_LIST()
    } else {
      ElMessage({
        type: 'error',
        message: `${type}失败`,
      })
    }
  } else {
    ElMessage({
      type: 'info',
      message: `取消${type}`,
    })
  }
}
// const CHANGE_ATTR_CALLBACK = () => {
//   SWITCH_CARD('DEFAULT_LIST')
//   GET_LIST()
// }

const OPEN_DIALOG = async (id = 0) => {
  //   console.log(id)
  await GET_SKU_LIST(id)
}

const GET_SKU_LIST = async (id) => {
  let result: SpuListResponseData = await resIdBySkuList(id)
  if (result.code == 200) {
    sku_tableData.value = result.data
    dialogVisible.value = true
  }
}
</script>

<style scoped lang="scss"></style>
